// 导入React核心库和相关hooks
import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
// 导入Ant Design Mobile UI组件
import { Image, Space, DotLoading, Toast, Empty, SearchBar, Avatar, SpinLoading } from 'antd-mobile';
// 导入路由导航hook
import { useNavigate } from 'react-router-dom';
// 导入瀑布流布局组件
import Masonry from 'react-masonry-css';

// 导入API服务和数据类型
import { getTravelList, TravelItem } from '../../services/api';
// 导入样式文件
import './styles.css';

// 定义游记列表状态接口
interface TravelListState {
  loading: boolean;      // 加载状态
  data: TravelItem[];    // 游记数据数组
  allData: TravelItem[]; // 所有游记数据（用于前端筛选）
  page: number;          // 当前页码
  limit: number;         // 每页数据条数
  hasMore: boolean;      // 是否有更多数据
  error: string | null;  // 错误信息
  searchText: string;    // 搜索文本
  isSearching: boolean;  // 是否正在搜索
}

// 旅游主题色
const THEME_COLORS = {
  primary: '#27408b',     // 主色调：有质感的深蓝色
  secondary: '#3498db',   // 次要色：湖水蓝
  accent: '#f39c12',      // 强调色：温暖的橙色
  background: '#f9f9f9',  // 背景色：浅灰色
  text: '#2c3e50',        // 文本色：深蓝灰色
  lightText: '#7f8c8d',   // 浅色文本：灰色
};

// 首页组件定义
const HomePage: React.FC = () => {
  // 获取导航函数，用于页面跳转
  const navigate = useNavigate();
  // 使用useState管理组件状态
  const [state, setState] = useState<TravelListState>({
    loading: true,       // 初始状态为加载中
    data: [],            // 初始数据为空数组
    allData: [],         // 所有数据（不分页）
    page: 1,             // 初始页码为1
    limit: 12,           // 每页显示12条数据
    hasMore: true,       // 初始假设有更多数据
    error: null,         // 初始无错误
    searchText: '',      // 初始搜索文本为空
    isSearching: false,  // 初始不在搜索状态
  });

  // 创建观察者引用，用于无限滚动
  const observerRef = useRef<IntersectionObserver | null>(null);
  // 创建加载元素引用，用于观察何时需要加载更多数据
  const loadingRef = useRef<HTMLDivElement>(null);

  // 获取游记数据的异步函数
  const fetchTravels = async (page = state.page, isNewSearch = false) => {
    try {
      // 设置加载状态，清除错误信息
      setState(prev => ({ ...prev, loading: true, error: null }));
      // 调用API获取游记列表数据
      const response = await getTravelList(page, state.limit, '');

      if (!response || !response.data) {
        throw new Error('获取数据失败：无效的响应数据');
      }

      // 更新状态
      setState(prev => {
        const newData = isNewSearch ? response.data : [...prev.data, ...response.data];
        // 合并所有数据用于前端筛选
        const allData = isNewSearch ? response.data : [...prev.allData, ...response.data];

        return {
          ...prev,
          loading: false,
          data: newData,
          allData: allData,
          page: page,
          hasMore: page < response.totalPages
        };
      });
    } catch (error) {
      // 错误处理
      console.error('获取游记列表失败:', error);
      // 更新错误状态
      setState(prev => ({
        ...prev,
        loading: false,
        error: '获取游记列表失败，请稍后重试'
      }));
      // 显示错误提示
      Toast.show({
        icon: 'fail',
        content: '获取游记列表失败，请稍后重试',
      });
    }
  };

  // 前端搜索筛选功能
  const handleSearch = (value: string) => {
    setState(prev => ({ ...prev, searchText: value, isSearching: true }));

    // 使用setTimeout模拟搜索延迟，增加loading效果
    setTimeout(() => {
      setState(prev => {
        // 如果搜索文本为空，显示所有数据
        if (!value.trim()) {
          return {
            ...prev,
            data: prev.allData,
            isSearching: false
          };
        }

        // 前端筛选逻辑
        const filteredData = prev.allData.filter(item => {
          const title = item.title?.toLowerCase() || '';
          const author = item.author?.nickname?.toLowerCase() || '';
          const location = item.location?.toLowerCase() || '';
          const searchLower = value.toLowerCase();

          return (
            title.includes(searchLower) ||
            author.includes(searchLower) ||
            location.includes(searchLower)
          );
        });

        return {
          ...prev,
          data: filteredData,
          isSearching: false
        };
      });
    }, 500); // 500ms的延迟，提供更好的用户体验
  };

  // 处理观察者事件的回调函数，用于无限滚动
  const handleObserver = useCallback((entries: IntersectionObserverEntry[]) => {
    const [entry] = entries;
    // 当观察元素进入视口，且有更多数据，且不在加载中状态时，加载下一页
    if (entry.isIntersecting && state.hasMore && !state.loading && !state.searchText) {
      fetchTravels(state.page + 1);
    }
  }, [state.hasMore, state.loading, state.page, state.searchText]);

  // 组件挂载时获取初始数据
  useEffect(() => {
    // 添加错误处理
    try {
      fetchTravels(1, true);
    } catch (error) {
      console.error('初始化数据加载失败:', error);
      Toast.show({
        icon: 'fail',
        content: '数据加载失败，请检查网络连接',
      });
    }
  }, []);

  // 设置无限滚动的观察者
  useEffect(() => {
    // 创建IntersectionObserver实例
    const observer = new IntersectionObserver(handleObserver, {
      root: null,           // 使用视口作为根
      rootMargin: '20px',   // 根元素的外边距
      threshold: 0.1        // 目标元素10%可见时触发回调
    });
    observerRef.current = observer;

    // 如果加载元素存在，开始观察
    if (loadingRef.current) {
      observer.observe(loadingRef.current);
    }

    // 组件卸载时清理观察者
    return () => {
      if (observerRef.current) {
        observerRef.current.disconnect();
      }
    };
  }, [handleObserver]);

  // 格式化日期的辅助函数
  const formatDate = (dateString: string) => {
    const date = new Date(dateString);
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  };

  // 渲染组件UI
  return (
    <div className="travel-home" style={{ backgroundColor: THEME_COLORS.background }}>
      {/* 页面标题栏 */}
      <div className="travel-header" style={{
        backgroundColor: THEME_COLORS.primary,
        padding: '12px 16px',
        color: 'white',
        textAlign: 'center',
        fontSize: '18px',
        fontWeight: 'bold',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        游记精选
      </div>

      {/* 搜索栏 */}
      <div className="search-container" style={{
        padding: '12px 16px',
        position: 'sticky',
        top: 0,
        zIndex: 100,
        backgroundColor: THEME_COLORS.background,
        boxShadow: '0 2px 6px rgba(0,0,0,0.05)'
      }}>
        <SearchBar
          placeholder="搜索游记标题、作者或地点"
          onSearch={handleSearch}
          onChange={handleSearch}
          onClear={() => handleSearch('')}
          showCancelButton
          style={{
            '--border-radius': '20px',
            '--background': 'white',
            '--height': '40px',
            '--placeholder-color': THEME_COLORS.lightText
          }}
        />
      </div>

      {/* 搜索状态指示器 */}
      {state.isSearching && (
        <div style={{
          textAlign: 'center',
          padding: '12px',
          color: THEME_COLORS.lightText,
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          gap: '8px'
        }}>
          <SpinLoading color={THEME_COLORS.primary} style={{ '--size': '20px' }} />
          <span>正在搜索...</span>
        </div>
      )}

      {/* 条件渲染：加载中、错误、空数据或游记列表 */}
      {state.loading && state.data.length === 0 ? (
        // 加载中状态
        <div className="loading-container" style={{
          padding: '40px 0',
          textAlign: 'center',
          color: THEME_COLORS.lightText
        }}>
          <Space direction="vertical" align="center">
            <SpinLoading color={THEME_COLORS.primary} style={{ '--size': '32px' }} />
            <span>正在加载游记</span>
          </Space>
        </div>
      ) : state.error && state.data.length === 0 ? (
        // 错误状态
        <div className="error-container" style={{
          padding: '40px 20px',
          textAlign: 'center',
          color: THEME_COLORS.text
        }}>
          <div>{state.error}</div>
          <div style={{ marginTop: '12px' }}>
            <button
              onClick={() => fetchTravels(1, true)}
              style={{
                padding: '8px 16px',
                backgroundColor: THEME_COLORS.primary,
                color: 'white',
                border: 'none',
                borderRadius: '20px',
                boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
              }}
            >
              重新加载
            </button>
          </div>
        </div>
      ) : state.data.length === 0 ? (
        // 空数据状态
        <Empty
          description={state.searchText ? "没有找到相关游记" : "暂无游记数据"}
          style={{
            padding: '40px 0',
            color: THEME_COLORS.lightText
          }}
        />
      ) : (
        // 瀑布流布局的游记列表
        <div style={{ padding: '12px' }}>
          <Masonry
            breakpointCols={2}                      // 设置列数为2
            className="travel-masonry-grid"         // 瀑布流容器类名
            columnClassName="travel-masonry-grid_column" // 列类名
          >
            {/* 遍历渲染游记卡片 */}
            {state.data.map(item => (
              <div
                key={item.id}                       // 使用游记ID作为key
                className="travel-card"             // 卡片类名
                onClick={() => navigate(`/detail/${item.id}`)} // 点击跳转到详情页
                style={{
                  backgroundColor: 'white',
                  borderRadius: '12px',
                  overflow: 'hidden',
                  boxShadow: '0 2px 8px rgba(0,0,0,0.08)',
                  marginBottom: '16px',
                  transition: 'all 0.3s ease',
                  cursor: 'pointer',
                  transform: 'translateY(0)',
                }}
                onTouchStart={(e) => {
                  e.currentTarget.style.transform = 'translateY(-4px)';
                  e.currentTarget.style.boxShadow = '0 6px 12px rgba(0,0,0,0.12)';
                }}
                onTouchEnd={(e) => {
                  e.currentTarget.style.transform = 'translateY(0)';
                  e.currentTarget.style.boxShadow = '0 2px 8px rgba(0,0,0,0.08)';
                }}
              >
                {/* 游记卡片图片区域 */}
                <div className="travel-card-image" style={{
                  position: 'relative',
                  paddingBottom: '66%', // 宽高比3:2
                  overflow: 'hidden',
                }}>
                  <Image
                    src={item.images && item.images.length > 0 ? item.images[0] : ''}
                    fit='cover'                     // 图片填充模式
                    style={{
                      position: 'absolute',
                      top: 0,
                      left: 0,
                      width: '100%',
                      height: '100%',
                      objectFit: 'cover',
                    }}
                    fallback={
                      <div className="image-fallback" style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center',
                        backgroundColor: '#f0f0f0',
                        color: THEME_COLORS.lightText
                      }}>
                        图片加载失败
                      </div>
                    }
                    lazy
                    placeholder={
                      <div style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        width: '100%',
                        height: '100%',
                        backgroundColor: '#f5f5f5',
                        display: 'flex',
                        justifyContent: 'center',
                        alignItems: 'center'
                      }}>
                        <DotLoading color={THEME_COLORS.primary} />
                      </div>
                    }
                  />
                  {/* 位置标签 */}
                  {item.location && (
                    <div style={{
                      position: 'absolute',
                      bottom: '8px',
                      left: '8px',
                      backgroundColor: 'rgba(0,0,0,0.6)',
                      color: 'white',
                      fontSize: '12px',
                      padding: '4px 8px',
                      borderRadius: '12px',
                      display: 'flex',
                      alignItems: 'center',
                      maxWidth: '70%',
                    }}>
                      <svg viewBox="0 0 24 24" width="14" height="14" style={{ marginRight: '4px' }}>
                        <path fill="white" d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
                      </svg>
                      <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                        {item.location}
                      </span>
                    </div>
                  )}
                </div>
                {/* 游记卡片内容区域 */}
                <div className="travel-card-content" style={{ padding: '12px' }}>
                  {/* 游记标题 */}
                  <h3 className="travel-card-title" style={{
                    margin: '0 0 12px 0',
                    fontSize: '16px',
                    fontWeight: 'bold',
                    color: THEME_COLORS.text,
                    overflow: 'hidden',
                    textOverflow: 'ellipsis',
                    display: '-webkit-box',
                    WebkitLineClamp: 2,
                    WebkitBoxOrient: 'vertical',
                    lineHeight: '1.4'
                  }}>{item.title}</h3>

                  {/* 作者信息 */}
                  <div className="travel-card-author" style={{
                    display: 'flex',
                    alignItems: 'center',
                    fontSize: '14px',
                    color: THEME_COLORS.lightText,
                    marginBottom: '8px'
                  }}>
                    <Avatar
                      src={item.author?.avatar || ''}
                      style={{
                        '--size': '24px',
                        marginRight: '6px'
                      }}
                      fallback="用户"               // 头像加载失败时的替代内容
                    />
                    <span style={{
                      overflow: 'hidden',
                      textOverflow: 'ellipsis',
                      whiteSpace: 'nowrap',
                      maxWidth: '100px'
                    }}>{item.author?.nickname || '未知用户'}</span>
                  </div>

                  {/* 日期 */}
                  <div style={{
                    fontSize: '12px',
                    color: THEME_COLORS.lightText
                  }}>
                    {item.createdAt ? formatDate(item.createdAt) : '未知日期'}
                  </div>
                </div>
              </div>
            ))}
          </Masonry>
        </div>
      )}

      {/* 加载更多指示器，用于无限滚动 */}
      <div ref={loadingRef} className="loading-more" style={{
        textAlign: 'center',
        padding: '16px',
        color: THEME_COLORS.lightText
      }}>
        {state.loading && !state.isSearching && (
          <div className="loading-indicator" style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            gap: '8px'
          }}>
            <DotLoading color={THEME_COLORS.primary} />
            <span>加载更多精彩游记</span>
          </div>
        )}
      </div>
    </div>
  );
};

export default HomePage;